import React, {Component} from 'react'
import {View, Text, StyleSheet, TouchableOpacity, Platform} from 'react-native'
import Icon from 'react-native-vector-icons/Ionicons'

import {BLUE} from '../../config/styles'

class QuickFilter extends Component {
    static defaultProps = {
        onPress: () => {},
        active: false,
        activeIconName: '',
        unactiveIconName: '',
        filterName: ''
    }

    render () {
        const props = this.props
        const iconName = props.active ? props.activeIconName : props.unactiveIconName
        return(
            <TouchableOpacity style={[styles.header_container, {backgroundColor: BLUE}]} onPress={props.onPress}>
                <View style={{flexDirection: 'row'}}>
                    <View style={{justifyContent: 'center',alignItems: 'center', paddingLeft: 3}}>
                        <Text style={{fontSize: 16, color: 'white'}}>
                            {props.filterName}
                        </Text>
                        {<View style={{backgroundColor: props.active ? 'white' : 'rgba(0,0,0,0)' ,height:3,width:23,borderRadius:10,marginTop:5}} />}
                       
                    </View>
                </View>
            </TouchableOpacity>
        )
    }
}

const styles = StyleSheet.create({
    header_container: {
        flex: 1, 
        justifyContent: 'center', 
        alignItems: 'center'
    }
  });

export default QuickFilter